<template>
  <div>
    <div class="shoujianxiangs">
      <div class="wrap3 flex-col">
        <div v-show="isshow">
          <div class="header">
            <div class="group4-r">
              <select class="fankui" v-model="nTimeType">
                <option value="1">反馈时间</option>
                <option value="2">回复时间</option>
              </select>

              <el-date-picker
                v-model="startTime"
                default-value="startTime"
                type="date"
                placeholder="开始日期"
              ></el-date-picker>
              <span style="padding: 0 3px">-</span>
              <el-date-picker
                type="date"
                v-model="endTime"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
              ></el-date-picker>

              <span class="zhuangtai">状态</span>
              <select class="fankui" v-model="nState" @change="Selectletter">
                <option value="-1">全部</option>
                <option value="1">回复</option>
                <option value="0">未回复</option>
              </select>
              <input class="danweimingc" type="text" v-model="sTheme" placeholder="主题/内容" />
              <el-button type="primary" @click="Selectletter">查询</el-button>
            </div>
          </div>
          <div class="group5 shoujian flex-col">
            <el-table
              :data="PostSelectletterEmpty"
              tooltip-effect="dark"
              style="width: 100%"
              @select="tabid(nUid)"
              :header-cell-style="{'text-align':'center'}"
            >
              <el-table-column prop="sTheme" label="主题" width="120" align="center"></el-table-column>
              <el-table-column v-html="sContent" prop="sContent"   label="内容" show-overflow-tooltip align="center"></el-table-column>
              <el-table-column
                prop="dFeedbackTime"
                label="反馈时间"
                show-overflow-tooltip
                align="center"
              ></el-table-column>
              <el-table-column prop="nState" label="状态" show-overflow-tooltip align="center">
                <template scope="scope">
                  <span v-if="scope.row.nState === 1">已回复</span>
                  <span v-if="scope.row.nState === 0">未回复</span>
                </template>
              </el-table-column>
              <el-table-column prop="replyName" label="回复人" show-overflow-tooltip align="center"></el-table-column>
              <el-table-column prop="dReplyTime" label="回复时间" show-overflow-tooltip align="center"></el-table-column>
              <el-table-column label="操作" prop="nState" show-overflow-tooltip align="right">
                <template slot-scope="scope">
                  <span class="hf" @click="chakan(scope.row)" v-if="scope.row.nState === 1">查看回复</span>
                  <span class="hf" href="#" @click="add(scope.row)" v-if="scope.row.nState === 0">回复</span>
                  <span>|</span>
                  <span class="hf" href="#" @click.prevent="dialogVisible=true">删除</span>
                   <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span>此操作将永久删除该文件, 是否继续?</span>
          <span slot="footer" class="dialog-footer">
            <button class="button1" @click="dialogVisible = false">取 消</button>
            <button class="button2" type="primary" @click="postDeleteLetter(scope.row)">确 定</button>
          </span>
        </el-dialog>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 回复 -->
        <div v-show="ishowfan">
          <div class="group4 flex-col" @click="addf">
            <span class="txt2">返回</span>
          </div>
          <div class="fanhui">
            <!-- 回复 -->
            <div class="huifu">
              <div>{{ hfsTheme }}</div>
              <div>提交人：{{ sName }} 提交时间：{{ dFeedbackTime }}</div>
              <div class="sContent" v-html="sContent">
                <!-- 信件内容 -->
                {{ sContent }}
              </div>
              <div>回复内容</div>
              <!-- 富文本 -->
              <quill-editor
                v-model="sReplyContent"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)"
              ></quill-editor>
              <div>
                <button @click="postReplyLetter" class="queding">确定</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 查看回复 -->
        <div v-show="ischakan">
          <div class="group4 flex-col" @click="addf">
            <span class="txt2">返回</span>
          </div>
          <div class="fanhui">
            <div class="huifu">
              <div>{{ hfsTheme }}</div>
              <div>提交人：{{ sName }} 提交时间：{{ dFeedbackTime }}</div>
              <div v-html="sContent">
                <!-- 信件内容 -->
                {{ sContent }}
              </div>
              <div>回复内容</div>
                 <div class="replytime">回复时间：{{ dReplyTime }}</div>
              <div class="hfneirong" v-html="sReplyContent">{{ sReplyContent }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import tools from "@/utils/tools";

export default {
  name: "about",
  data () {
    return {
      dialogVisible:false,
      date: new Date(),
      timer: "", //定义的计数器
      nowTime: "",
      hfsTheme: "",
      sName: "",
      dFeedbackTime: "",
      sReplyContent: "",
      // 获取到的信件
      PostSelectletterEmpty: [],
      sTheme: "",
      sContent: "",
      // 富文本
      content: null,
      editorOption: {},
      startTime: '',
      endTime: new Date(),
      nTimeType: '1',
      nState: '-1',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",
      list: [],
      id: "",
      name: "",
      ctime: "",
      zhuang: "",
      // 修改暂存数据
      newlist: {},
      keywords: "",
      value: "",
      input: "",
      isshow: true,
      ishowfan: false,
      ischakan: false,
      labelPosition: "right",
      nUid: "",
      postReplyLetterEmpty: [],
    };
  },
  components: {
    quillEditor,
  },
  created () {
    this.getStartTime()
    this.Selectletter();

  },

  mounted () {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = this.getTime(); // 修改数据date
    }, 1000);
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    // 格式化时间
    getTime () {
      var date1 = new Date();
      var year = date1.getFullYear();
      var month = date1.getMonth() + 1;
      var day = date1.getDate();
      var hours = date1.getHours();
      var minutes = date1.getMinutes();
      var seconds = date1.getSeconds();
      return (
        year +
        "/" +
        month +
        "/" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },

    getStartTime () {
      const startTime = new Date();
      startTime.setMonth(startTime.getMonth() - 1);
      console.log(startTime)
      this.startTime = startTime
    },
    // 获取查询接口，为空时获取全部
    async Selectletter () {

      const { data: res } = await this.$http.get(
        "/api/lettersend/Get_selectlettersend",
        {
          params: {
            nLid:0,
            nTimeType: this.nTimeType,
            startTime: this.startTime,
            endTime: this.endTime,
            nState: this.nState,
            sTheme: this.sTheme,
          },
        }
      );
      this.PostSelectletterEmpty = res;
    },
    //  回复信件接口
    async postReplyLetter () {
       // 请求html 标签方法调用
            this.sReplyContent = this.delHtmlTag(this.sReplyContent)
      this.isshow = true;
      this.ishowfan = false;
      this.nUid = tools.getCookie("nUid");
      let formData = new FormData();
      formData.append("sReplyContent", this.sReplyContent); //回复内容
      formData.append("dReplyTime", this.date); //回复时间
      formData.append("nUid", this.nUid); //回复人编号
      formData.append("nReid", this.nLid); //回复信件id nLid
      formData.append("nState", 1); //信件回复状态
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      const { data: res } = await this.$http.post(
        "/api/letterreply/Post_Addlettrreply",
        formData,
        config
      );
      // this.postReplyLetterEmpty = res
      console.log(res);
      this.nState="-1"
      this.sReplyContent=""
      this.Selectletter();
       this.$message({
          message: '您已回复成功',
          type: 'success'
        });
    },

    // 删除信件
    async postDeleteLetter (row) {
      this.dialogVisible=false,
      this.nLid = row.nLid;
      let formData = new FormData();
      formData.append("nLid", this.nLid); //回复信件id nLid
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      const { data: res } = await this.$http.post(
        "/api/lettersend/Post_deletelettersend",
        formData,
        config
      );
      console.log(res);
      this.Selectletter();
       this.$message({
            type: 'success',
            message: '删除成功!'
          });
    },

    search (keywords) {
      let newList = this.list.filter((item) => {
        if ((item.zhuti, item.neirong, item.name).includes(keywords)) {
          return item;
        }
      });
      return newList;
    },
    chakan (row) {
      this.hfsTheme = row.sTheme;
      this.sContent = row.sContent;
      this.sName = row.sName;
      this.dFeedbackTime = row.dFeedbackTime;
      this.dReplyTime=row.dReplyTime;
      this.sReplyContent = row.sReplyContent;
      this.isshow = false;
      this.ischakan = true;
    },
    add (row) {
      this.nLid = row.nLid;
      this.hfsTheme = row.sTheme;
      this.sContent = row.sContent;
      this.sName = row.sName;
      this.nState = row.nState;
      this.dFeedbackTime = row.dFeedbackTime;
      this.isshow = false;
      this.ishowfan = true;
    },
    addf () {
      this.isshow = true;
      this.ishowfan = false;
      this.ischakan=false
    },
    queding () {
      this.isshow = true;
      this.ishowfan = false;
    },
    // 移除文本内容中的HTML 标签
        delHtmlTag(str) {
          return str.replace(/<[^>]+>/g,"");
        },
    onEditorReady (editor) {
      // 准备编辑器
      console.log("111");
    },
    onEditorBlur () {
      // 失去焦点事件
      console.log("111");
    },
    onEditorFocus () {
      // 获得焦点事件
      // console.log('222')
    },
    onEditorChange () {
      // 内容改变事件
      console.log("333");
    },
  },
};
</script>
<style scoped lang="css" src="./assets/index.css" />
